<template>
    <div>
        <!-- 查询区域 -->
        <Row style="margin:5px 0px 7px 5px" >
            <i-col span="2" >
                <Button  size="default"  type="primary" @click="btn_refresh">刷新</Button>
            </i-col>
            <i-col span="6">
               <i-input size="default" v-model="pvc_name"  search   placeholder="输入PVC名字" @on-enter="btn_enter" >
                    <Button  size="default"  slot="append"  icon="md-search" @click="btn_select_pvc"></Button>
                </i-input>
            </i-col>
        </Row>
        <i-table size="default"   border stripe :columns="format" :data="show_list" :height="sharedState.tableHeight" >
            <template slot-scope="{ row, index }" slot="action">
                    <Button  size="default"  type="error"   @click="del_pvc(index)">删除</Button>
            </template>
        </i-table >
        <div style="text-align: center;margin-top: 10px;">
            <Page ref="page" :total="total" :page-size="pageSize"  @on-change="changePage" show-total/>
        </div>
    </div>
</template>

<script>

import {k8s_namespace_post,k8s_cluster_post} from '@/api/http'
import { delete_pvc, get_pvc_list,select_pvc} from  '@/api'
import { delete_namespace_resource,show_simple_page} from '@/common/util.js'
import store from '@/store'

export default {
    data() {
        return {
            sharedState: store.state,
            format: [
                {
                    title: '名字',key: 'name',align: 'center',width: 250,fixed:'left',
                },
                {
                    title: '命名空间',key: 'namespace',align: 'center',width: 150,
                },
                {
                    title: 'pv',key: 'pv',align: 'center',width: 250,
                    render: (h,params) => {
                        let value = params.row.pv
                        return h('Poptip', {props:{'trigger':'hover','word-wrap':true,'placement':'right',content:value}},[
                            h('a', '显示')
                        ]);
                    }
                },
                {
                    title: '状态', key: 'status',align: 'center',width: 150,
                },
                {
                    title: '容量',key: 'capacity',align: 'center',width: 150,
                },
                // {
                //     title: '资源',key: 'resources',width:350,
                // },
                {
                    title: '访问模式',key: 'access_modes',align: 'center',width: 150,
                },
                {
                    title: '存储类型',key: 'storage_class_name',align: 'center',width: 150,
                    render: (h,params) =>{
                        let value = params.row.storage_class_name
                        if(!value){
                            return h('p','无')
                        }else{
                            return h('p',value)
                        }
                    }
                },
                {
                    title: '创建时间',key: 'create_time',align: 'center',width: 150,
                },
                {
                    title: '操作',slot: 'action',align: 'center',width: 150,fixed:'right',
                }

            ],
            total_list: [],
            show_list: [],
            // 分页
            total: 0,
            pageSize: 10,
            // 查询
            pvc_name: '',
        }
    },
    methods: {
        btn_refresh(){
            this.refresh()
        },
        btn_enter(){
            return
        },
        // 查询
        btn_select_pvc(){
            let name=this.pvc_name.trim()
            let data = {
                "name": name,
            }
            k8s_cluster_post(select_pvc,data).then(response=>{
                show_simple_page(this,response)
            })
        },
        changePage(index) {
            let _start = (index -1) * this.pageSize
            let _end = index * this.pageSize
            this.show_list = this.total_list.slice(_start,_end)
        },
        del_pvc(index) {
            let name = this.show_list[index].name
            let result = confirm("确定要删除"+name+"吗?")
            if(result == false) return 
            let namespace = this.show_list[index].namespace
            delete_namespace_resource(namespace,name,delete_pvc)
            this.refresh()
        },
        refresh() {
            k8s_namespace_post(get_pvc_list).then( (response) => {
                show_simple_page(this,response)
            })
        }
    },
    mounted: function() {
        setTimeout(() =>{
            this.refresh();
        },200); 
    }
}
</script>
<style scoped>

</style>